import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { cloneDeep } from 'lodash';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styles: [
    `
      .customer-header {
        font-size: 0.16rem;
        line-height: 0.24rem;
        color: blueviolet;
      }
      .customer-content {
        width: 3rem;
        height: 2rem;
        margin-bottom: 0.16rem;
        overflow: auto;
      }
      .customer-content > lv-group {
        margin-bottom: 0.08rem;
      }
      .customer-footer {
        display: flex;
        justify-content: flex-end;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TemplateComponent implements OnInit {
  loading = false;
  selected = [];
  _cacheSelected = [];
  visible;

  constructor(private _cdr: ChangeDetectorRef) {}

  ngOnInit() {}

  open() {
    this.visible = true;
  }

  beforeOpen = () =>
    new Promise(resolve => {
      setTimeout(() => {
        this._cacheSelected = cloneDeep(this.selected);
        resolve(true);
      }, 200);
    });

  externalClose() {
    this.selected = this._cacheSelected;
    console.log(this.selected);
  }

  confirm() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this._cacheSelected = cloneDeep(this.selected);
      this.visible = false;
      this._cdr.markForCheck();
    }, 2000);
  }

  cancel() {
    this.selected = this._cacheSelected;
    this.visible = false;
  }
}
